<!--
 * @Author: CNN 969682281@qq.com
 * @Date: 2023-03-07 13:36:39
 * @LastEditors: CNN 969682281@qq.com
 * @LastEditTime: 2024-01-05 15:42:23
 * @FilePath: \newMould_BHZ\src\views\WaterManage\trends\instantly.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 水稳----动态监控---实时监控 -->
  <div class="department" id="department">
    <!-- 左侧部门管理 -->

    <!-- 右侧 -->
    <div class="department_right">
      <!-- 机构名称 -->
      <!-- <el-breadcrumb :title="showName"></el-breadcrumb> -->
      <!-- 顶部导航栏 -->

      <div class="app-container-btn">
        <el-button @click="goBack">返回</el-button>
      </div>
      <!-- 表格 -->
      <div class="text_table TensionRealTimesecondLevel" style="height: 100%">
        <div
          class="dialogBodyBox TensionRealTimesecondLevelBox"
          style="position: relative; height: 61%"
        >
          <tableData
            height="100%"
            :page="materialGetList.page"
            :pageSize="materialGetList.pageSize"
            :config="material_config"
            :dataList="materialData"
            statusType="3"
            :level="level"
            :earlyWarning="earlyWarning"
            :currentRow="false"
            :stripe="false"
          />
          <PaginationS
            :info="queryCriteriaDatas_M"
            :total="queryCriteriaDatas_M.total"
            :pageNum.sync="materialGetList.page"
            :limit.sync="materialGetList.pageSize"
            @pagination="processDetailsFun(materialGetList)"
          />
        </div>
        <div class="dialogBodyBox" style="height: 39%">
          <div class="tab">
            <div
              v-for="(data, index) in typeData"
              :key="data.value"
              @click="changeType($event, index)"
            >
              <div
                class="btn"
                :style="{
                  color:
                    data.show === true ? 'rgba(0, 117, 255, 1)' : '#343639',
                  background: data.show === true ? '#E0EFFF' : '#fff',
                }"
              >
                {{ data.text }}
              </div>
            </div>
          </div>

          <div class="charts" v-if="typeData[0].show">
            <!-- 张拉力-->
            <tensioningCharts
              v-loading="chartsLoading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.3)"
              :time1="this.value2[0]"
              :time2="this.value2[1]"
              :commonData="tensioningData"
              @clickLegend="clickLegend"
            >
            </tensioningCharts>
          </div>

          <div class="charts" v-if="typeData[1].show">
            <!-- 油压 -->
            <pressureCharts
              v-loading="chartsLoading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.3)"
              :time1="this.value2[0]"
              :time2="this.value2[1]"
              :commonData="pressureData"
              @clickLegend="clickLegend"
            >
            </pressureCharts>
          </div>
          <div class="charts" v-if="typeData[2].show">
            <!-- 伸长量 -->
            <elongationCharts
              v-loading="chartsLoading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.3)"
              :time1="this.value2[0]"
              :time2="this.value2[1]"
              :commonData="elongationData"
              @clickLegend="clickLegend"
            >
            </elongationCharts>
          </div>
          <div class="charts" v-if="typeData[3].show">
            <!-- 顶行程-->
            <tripCharts
              v-loading="chartsLoading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.3)"
              :time1="this.value2[0]"
              :time2="this.value2[1]"
              :commonData="tripData"
              @clickLegend="clickLegend"
            >
            </tripCharts>
          </div>
        </div>
      </div>

      <!--弹框 过程数据详情---查看 -->
    </div>
  </div>
</template>
  
<script>
// import vDatePicker from "@/components/public/v-DatePicker"; //时间选择器
import TableData from "@/components/waterManage/public/el-tables"; //主页面列表
import PaginationS from "@/components/TensionAndGrout/TensionManage/TensionRealTime/el-pagination"; //弹框分页

import pressureCharts from "@/components/TensionAndGrout/TensionManage/TensionRealTime/pressureCharts"; //油压
import tensioningCharts from "@/components/TensionAndGrout/TensionManage/TensionRealTime/tensioningCharts"; //张拉力
import elongationCharts from "@/components/TensionAndGrout/TensionManage/TensionRealTime/elongationCharts"; //伸长量
import tripCharts from "@/components/TensionAndGrout/TensionManage/TensionRealTime/tripCharts"; //伸长量

// import publicForm from "@/components/public/el-form.vue"; //弹框form

import formJs from "./regexDetail.js"; //新增弹框配置项
import {
  getTensioningProcessDetailLists, //2级详情接口
} from "@/api/request.js";
// import { statusType } from "@/utils/config"; //配置项   初中高
export default {
  name: "TensionRealTimesecondLevel",
  components: {
    TableData, //主页面列表
    PaginationS,
    pressureCharts, //油石比图表
    tensioningCharts, //温度曲线
    elongationCharts, //伸长量
    tripCharts, //顶行程
  },
  data() {
    return {
      name: "TensionRealTimesecondLevel", //按钮配置页面代号
      editLoading: false,
      // 查看
      tableDataLook: [],
      materialGetList: {
        namberId: "", // 孔号id
        page: 1, // 当前页码
        pageSize: 15, // 每页显示条数
      }, //调取过程数据详情接口传参
      materialData: [], //列表
      queryCriteriaDatas_M: {}, //过程数据-详情-分页
      typeData: [
        { text: "张拉力", show: true },
        { text: "油压", show: false },
        { text: "伸长量", show: false },
        { text: "顶行程", show: false },
      ],
      tensioningData: [], //张拉力--图表数据
      pressureData: [], //油压--图表数据
      elongationData: [], //伸长量--图表数据
      tripData: [], //顶行程--图表数据
      chartsLoading: false,
      level: [],
      earlyWarning: [], //预警标准
      material_config: formJs.material_config, //材料配置项
      // 详情
      value2: [],
      xlsxName: null,
    };
  },
  destroyed() {
    window.sessionStorage.removeItem("GxTensionManage_beamTwo");
  },
  mounted() {
    if (JSON.parse(sessionStorage.getItem("GxTensionManage_beamTwo"))) {
      var dataList = JSON.parse(
        sessionStorage.getItem("GxTensionManage_beamTwo")
      );
      this.materialGetList = {
        namberId: dataList.fNamberid, // 孔号id
        fCompanyid: dataList.fCompanyid,
        page: 1, // 当前页码
        pageSize: 15, // 每页显示条数
      };
      this.processDetailsFun(this.materialGetList);
    }

    this.getDate();
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    getDate() {
      if (
        JSON.parse(sessionStorage.getItem("GxEmbedded_TensionManage_getLists"))
      ) {
        var getList = JSON.parse(
          sessionStorage.getItem("GxEmbedded_TensionManage_getLists")
        );
        this.value2 = [getList.startDates, getList.endDates];
        this.xlsxName =
          getList.startDates + "至" + getList.endDates + "张拉超标数据监控";
      } else {
        this.value2 = [
          this.common.getDay(-90) + " " + "00:00:00",
          this.common.getDay(0) + " " + "23:59:59",
        ];
        this.xlsxName =
          this.common.getDay(-90) +
          "至" +
          this.common.getDay(0) +
          " " +
          "23:59:59" +
          "张拉超标数据监控";
      }
    },

    // 点击图表切换
    changeType(e, index) {
      for (let i in this.typeData) {
        if (parseFloat(i) === index) {
          this.typeData[i].show = true;
        } else {
          this.typeData[i].show = false;
        }
      }
      this.typeDataNum = index;
    },
    // 过程数据详情
    processDetailsFun(data) {
      this.materialData = [];
      // if (this.$route.query.data.fId != "" && this.$route.query.data.fId != null) {
      getTensioningProcessDetailLists(data)
        .then((res) => {
          if (res.errcode == 0) {
            var that = this;
            that.materialData = res.data.pageInfo.list;
            that.queryCriteriaDatas_M = res.data.pageInfo; //分页信息

            that.tensioningData = [
              res.data.line.recorddatesList,
              res.data.line.force1List,
              res.data.line.force2List,
            ]; //张拉力--图表数据
            that.pressureData = [
              res.data.line.recorddatesList,
              res.data.line.pressure1List,
              res.data.line.pressure2List,
            ]; //油压--图表数据
            that.elongationData = [
              res.data.line.recorddatesList,
              res.data.line.elongation1List,
              res.data.line.elongation2List,
            ]; //伸长量--图表数据
            that.tripData = [
              res.data.line.recorddatesList,
              res.data.line.topstroke1List,
              res.data.line.topstroke2List,
            ]; //顶行程--图表数据
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((error) => {
          this.$message.error(error.msg);
        });
      // } else {
      //     return this.$message.error("请先选择需要查看的数据");
      // }
    },

    // 多选方法
    selectionChange() {},
    // 排序方法
    sortChange() {},
  },
};
</script>
  
  
<style scoped lang='less'>
.TensionRealTimesecondLevelBox {
  display: flex;
  flex-direction: column;
}

.dialogBodyBox .tab {
  display: flex;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  border-bottom: 2px solid #e4e7ed;
  padding: 0 0.16rem;
}

.dialogBodyBox {
  // width: 100%;

  .tab {
    display: flex;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    border-bottom: 2px solid #e4e7ed;
    padding: 0 0.16rem;

    .btn {
      margin-top: 4px;
      // margin-right: 16px;
      width: 80px;
      height: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top-right-radius: 4px;
      border-top-left-radius: 4px;
    }
  }

  .charts {
    height: calc(100% - 30px);
  }
}

.common .block {
  bottom: 5px !important;
}
</style>
  
  
  